<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>历史 - 宝贝盒子</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #6c7cf8;
      font-family: 'HarmonyOS Sans', '微软雅黑', Arial, sans-serif;
      min-height: 100vh;
      color: #222;
    }
    .topbar {
      width: 100%;
      background: #6c7cf8;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      padding: 22px 0 18px 20px;
      box-sizing: border-box;
      letter-spacing: 1px;
    }
    .history-list {
      margin: 16px 12px 0 12px;
    }
    .history-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 10px #e0e7ef2e;
      padding: 14px 16px 14px 16px;
      margin-bottom: 14px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .history-icon {
      width: 38px;
      height: 38px;
      background: #e6eafe;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #6c7cf8;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .history-content {
      flex: 1;
    }
    .history-title-row {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
    }
    .history-title {
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin-right: 8px;
    }
    .history-time {
      font-size: 13px;
      color: #999;
      margin-left: auto;
    }
    .history-desc {
      font-size: 14px;
      color: #666;
      margin-top: 2px;
    }
    .bottom-nav {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      height: 60px;
      background: #fff;
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -2px 12px #0001;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 10;
    }
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #888;
      font-size: 12px;
      width: 20%;
      cursor: pointer;
      transition: color 0.2s;
    }
    .nav-item.selected {
      color: #4f46e5;
      font-weight: 700;
    }
    .nav-icon {
      font-size: 22px;
      margin-bottom: 2px;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div class="topbar">历史</div>
  <div class="history-list">
    <div class="history-card">
      <div class="history-icon"><i class="fas fa-clock"></i></div>
      <div class="history-content">
        <div class="history-title-row">
          <div class="history-title">原子魔方</div>
          <div class="history-time">09:10</div>
        </div>
        <div class="history-desc">你完成了"像素头像"创作任务，获得了新徽章！</div>
      </div>
    </div>
    <div class="history-card">
      <div class="history-icon"><i class="fas fa-fire"></i></div>
      <div class="history-content">
        <div class="history-title-row">
          <div class="history-title">创世熔炉</div>
          <div class="history-time">昨天</div>
        </div>
        <div class="history-desc">你合成了新元素"光影水晶"。</div>
      </div>
    </div>
    <div class="history-card">
      <div class="history-icon"><i class="fas fa-puzzle-piece"></i></div>
      <div class="history-content">
        <div class="history-title-row">
          <div class="history-title">谜域旋廊</div>
          <div class="history-time">2天前</div>
        </div>
        <div class="history-desc">解锁了"星河一笔画"关卡。</div>
      </div>
    </div>
    <div class="history-card">
      <div class="history-icon"><i class="fas fa-seedling"></i></div>
      <div class="history-content">
        <div class="history-title-row">
          <div class="history-title">奇物收藏馆</div>
          <div class="history-time">3天前</div>
        </div>
        <div class="history-desc">获得稀有像素植物"蓝色星芽"。</div>
      </div>
    </div>
    <div class="history-card">
      <div class="history-icon"><i class="fas fa-lightbulb"></i></div>
      <div class="history-content">
        <div class="history-title-row">
          <div class="history-title">脑洞星球</div>
          <div class="history-time">4天前</div>
        </div>
        <div class="history-desc">AI为你生成了新故事《鲸鱼与宇航员》。</div>
      </div>
    </div>
  </div>
  <div class="bottom-nav">
    <div class="nav-item">
      <div class="nav-icon"><i class="fas fa-home"></i></div>
      首页
    </div>
    <div class="nav-item">
      <div class="nav-icon"><i class="fas fa-compass"></i></div>
      发现
    </div>
    <div class="nav-item selected">
      <div class="nav-icon"><i class="fas fa-clock"></i></div>
      历史
    </div>
    <div class="nav-item">
      <div class="nav-icon"><i class="fas fa-bell"></i></div>
      消息
    </div>
    <div class="nav-item">
      <div class="nav-icon"><i class="fas fa-user"></i></div>
      我的
    </div>
  </div>
</body>
</html>
